<template>
  <div class="box">
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="onSelect"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCounterStore } from '../../api/pinia'
const store = useCounterStore()
const router = useRouter()
const list = ref(JSON.parse(localStorage.getItem('address')) || [])

const chosenAddressId = ref(Number(localStorage.getItem('id')) || list.value[0])
const onAdd = () => {
  const data = null
  localStorage.setItem('addressData', data)
  localStorage.setItem('status', 'add')
  router.push('/xinZeng')
}
const onEdit = (e) => {
  console.log(e)
  localStorage.setItem('addressData', JSON.stringify(e))
  localStorage.setItem('status', 'get')
  router.push('/xinZeng')
}
// 选中
const onSelect = (item: any) => {
  console.log(item)

  localStorage.setItem('id', item.id)
  localStorage.setItem('address', JSON.stringify(list.value))
  localStorage.setItem('addressed', JSON.stringify(item))
  router.push('/Order')
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}
.button {
  width: 90%;
  height: 50px;
  position: fixed;
  bottom: 80px;
  left: 5%;
  border-radius: 20px;
  border: none;
  color: #fff;
  background: rgb(51, 231, 60);
  font-size: 20px;
}
.list {
  width: 90%;
  height: 100px;
  margin-left: 20px;
  border-radius: 10px;
}
.name {
  display: flex;
  margin: 10px;
  width: 100%;
}
.address {
  display: flex;
  margin: 10px;
  width: 100%;
}
.tel {
  margin-left: 5px;
}
.shi {
  margin-left: 5px;
}
</style>
